const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

let publicPath = '/';
let nodeEnv = process.env.NODE_ENV
if (nodeEnv === 'linetest') {
  publicPath = "https://www.linetest.com/";
} else if (nodeEnv === 'production') {
  publicPath = "https://www.online.com/";
}

/**
 * 如果是手机端请加入px2rem 到 postcss
 */
// const px2rem = [
//   "postcss-pxtorem",
//   {

//     rootValue: 75,
//     unitPrecision: 5,
//     propList: ['*'],
//     selectorBlackList: [],
//     mediaQuery: false,
//     minPixelValue: 0,
//     exclude: /node_modules/i
//   }
// ]


// const postcss = {
//   loader: "postcss-loader",
//   options: {
//     postcssOptions: {
//       plugins: [
//         [
//           "autoprefixer",
//           {
//             // Options
//           },
//         ],
//         px2rem
//       ],
//     },
//   },
// }

module.exports = {

  mode: 'development',
  entry: './src/app.js',
  target: ['web', 'es5'],
  devServer: {
    contentBase: './dist',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'webapp',
      template: path.resolve(__dirname, 'public/index.html')
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name].[hash:5].[ext]",
              limit: 1024, // size <= 1kib
              outputPath: "img"
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 2 } },
          'postcss-loader',
          "sass-loader",
        ],
      },
    ]
  }
}